<template>
    <view class="boxes">
        <loading-view :loading="!pageData" rows="3" :rowsWidth="['50%', '100%']" :rowsHeight="[24, 100]" marginTop="20">
            <view class="Product" v-for="(item, index) in pageData.data" :key="index">
                <view class="Shop">
                    <image :src="$imgUrls(item.shopLogo)" mode="aspectFill" class="shopLogo" v-if="item.shopLogo"></image>
                    <text class="shopName">{{ item.shopName }}</text>
                </view>
                <view class="list" v-for="(V, Vindex) in item.list" :key="Vindex">
                    <image :src="$imgUrls(V.img)" mode="aspectFill" class="goods_img"></image>
                    <view class="goodsInfo">
                        <text class="goods_title ellipsis_2">{{ V.name }}</text>
                        <text class="color_99 size28 ellipsis" v-if="V.operation_text">{{ V.operation_text }}</text>
                        <view class="color_99 size28" v-if="V.weight > 0">重量：{{ V.weight }}kg</view>
                        <view class="goods_Bot">
                            <view class="d-flex">
                                <view class="Pricesymbol">￥</view>
                                <text class="Price">{{ V.goodsOneOldPrice | goodsOneOldPrice }}</text>
                            </view>
                            <view class="Controls" v-if="goods_id">
                                <view class="Controls_icon subtract" @click.stop="handleSub(V)" :class="{ prohibit: subLimit(V) }">
                                    <view class="iconfont icon-jianhao size28"></view>
                                </view>
                                <view class="Controls_num" @click="editNum(V)">{{ V.num }}</view>
                                <view class="Controls_icon add" @click.stop="handleAdd(V)" :class="{ prohibit: addLimit(V) }">
                                    <view class="iconfont icon-jiahao size28"></view>
                                </view>
                                <!-- <view class="Controls_icon subtract" @click.stop="handleSub(V)"
									:class="{ prohibit: V.num == 1 }">
									<view class="iconfont icon-jianhao size28"></view>
								</view>
								<view class="Controls_num" @click="editNum(V)">{{ V.num }}</view>
								<view class="Controls_icon add" @click.stop="handleAdd(V)"
									:class="{ prohibit: V.num == V.stock }">
									<view class="iconfont icon-jiahao size28"></view>
								</view> -->
                            </view>
                            <text class="size28 color_99" v-else>x{{ V.num }}</text>
                        </view>
                    </view>
                </view>

                <view class="byJob" v-if="!arg.group_id && !arg.open_group">
                    <text class="allNum">共 {{ item.goodsNumber }} 件</text>
                    <text class="color_33 size28 m-left10">小计：</text>
                    <view class="d-flex">
                        <view class="Pricesymbol">￥</view>
                        <text class="Price">{{ item.goodsMoney.toFixed(2) }}</text>
                    </view>
                </view>
            </view>
        </loading-view>

        <view class="mask flexac" v-if="showNum">
            <view class="viewbox55 padding40 bgwhite bor_radius_30 text-center">
                <view class="size32">修改购买数量</view>
                <view class="margin40 d-flex j-centert">
                    <u-number-box v-model="value" integer :max="current.stock" inputWidth="80" bgColor="#fff"></u-number-box>
                </view>
                <view class="d-flex j-sb">
                    <view class="btn flexac bor_80 bor_radius_30" @click="showNum = false">取消</view>
                    <view class="btn flexac thmeBg bor_radius_30 white" @click="confirm">确定</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import LoadingView from './LoadingView.vue';
    export default {
        props: ['pageData', 'goods_id', 'car_id', 'arg'],
        components: {
            LoadingView
        },
        data() {
            return {
                showNum: false,
                current: '',
                value: 0
            };
        },
        methods: {
            editNum(item) {
                this.current = item;
                this.value = item.num;
                this.showNum = true;
            },
            confirm() {
                if (this.value < 1) return this.$Toast('最少购买1件哦！');
                if (this.arg.goods_id) this.$emit('changeData', 3, this.value);
                if (this.arg.car_id) this.incCart(this.current.car_id, this.value);
                this.showNum = false;
            },
            handleSub(item) {
                const buy_config = item.buy_config.buy_config;
                if (item.num == buy_config.min_num) return;
                if (this.arg.goods_id) this.$emit('changeData', 1);
                if (this.arg.car_id) this.incCart(item.car_id, +item.num - Number(buy_config.step_num));
                this.$emit('clearplayid');
            },
            handleAdd(item) {
                const buy_config = item.buy_config.buy_config;
                if (item.num == item.stock) return;
                if (buy_config.max_num && buy_config.max_num > 0 && item.num >= item.max_num) return;
                if (this.arg.goods_id) this.$emit('changeData', 2);
                if (this.arg.car_id) this.incCart(item.car_id, +item.num + 1);
                this.$emit('clearplayid');
            },
            // handleSub(item) {
            //     if (item.num == 1) return;
            //     if (this.arg.goods_id) this.$emit('changeData', 1);
            //     if (this.arg.car_id) this.incCart(item.car_id, +item.num - 1);
            // },
            // handleAdd(item) {
            //     if (item.num == item.stock) return;
            //     if (this.arg.goods_id) this.$emit('changeData', 2);
            //     if (this.arg.car_id) this.incCart(item.car_id, +item.num + 1);
            // },
            incCart(car_id, num) {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/incCart',
                        data: {
                            car_id,
                            num
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$pop(res.msg);
                        this.$emit('getPageData');
                    });
            },
            subLimit(item) {
                const buy_config = item.buy_config.buy_config;
                return item.num == buy_config.min_num ? true : false;
            },
            addLimit(item) {
                const buy_config = item.buy_config.buy_config;
                if (buy_config.max_num && buy_config.max_num > 0 && item.num == buy_config.max_num) return true;
                if (!buy_config.max_num || (buy_config.max_num <= 0 && item.num == item.stock)) return true;
            }
        },
        filters: {
            goodsOneOldPrice(Val) {
                let Price = +Val;
                return Price.toFixed(2);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .boxes {
        width: 710rpx;
        margin: 0 auto;
    }

    .Product {
        width: 100%;
        padding: 24rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        overflow: hidden;
        margin: 20rpx auto 0;

        .Shop {
            display: flex;
            align-items: center;
            // margin-bottom: 30rpx;

            .shopLogo {
                width: 46rpx;
                height: 46rpx;
                border-radius: 6rpx;
                margin-right: 14rpx;
            }

            .shopName {
                color: #333;
                font-size: 32rpx;
            }
        }

        .list {
            width: 100%;
            display: flex;
            margin-top: 40rpx;

            .goods_img {
                width: 200rpx;
                height: 200rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }

            .goodsInfo {
                flex: 1;
                height: 200rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .goods_title {
                    color: #000;
                    font-size: 30rpx;
                }

                .goods_Bot {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .Controls {
                        display: flex;
                        align-items: center;

                        &_icon {
                            width: 54rpx;
                            height: 50rpx;
                            background-color: #f3f3f3;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 28rpx;

                            .iconfont {
                                color: #323232;
                            }
                        }

                        .prohibit {
                            background-color: #f8f8f8 !important;

                            .iconfont {
                                color: #cccccc;
                            }
                        }

                        .subtract {
                            border-radius: 6rpx 0 0 6rpx;
                        }

                        .add {
                            border-radius: 0 6rpx 6rpx 0;
                        }

                        &_num {
                            padding: 0 20rpx;
                            min-width: 60rpx;
                            height: 50rpx;
                            background-color: #f3f3f3;
                            margin: 0 4rpx;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 28rpx;
                            color: #3a3a3a;
                        }
                    }
                }
            }
        }

        .byJob {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 40rpx;

            .allNum {
                color: #333;
                font-size: 28rpx;
            }
        }
    }

    .Pricesymbol {
        color: var(--color);
        font-size: 26rpx;
        margin-top: 10rpx;
    }

    .Price {
        color: var(--color);
        font-size: 36rpx;
    }

    .btn {
        width: 216rpx;
        height: 60rpx;
        font-size: 28rpx;
    }
</style>
